<%@ page language="java" contentType="text/html;charset=utf-8"
	pageEncoding="utf-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>控制响应设计模式组件</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">

<!-- Le styles -->
<link href="<c:url value='/css/bootstrap.min.css'/>" rel="stylesheet">
<link href="<c:url value='/css/bootstrap-responsive.css'/>" rel="stylesheet">

</head>
<body>
	<div class="container">
		<div class="tabbable" style="padding-top: 50px;">
			<div class="tabbable" style="margin-bottom: 18px;">
				<ul class="nav nav-tabs">
					<li class="active"><a href="#tab3" data-toggle="tab">控制响应</a></li>
				</ul>
				<div class="tab-content"
					style="padding-bottom: 9px; border-bottom: 1px solid #ddd;">
					<div class="tab-pane form-horizontal active" id="tab3">
						<div class="control-group span9">
							<label class="control-label" for="">设计模式文件名称</label>
							<div class="controls">
								<span class="uneditable-input input-xlarge"><c:out
										value="${dpiFileName}"></c:out> </span>
							</div>
						</div>
						<div class="control-group span9">
							<label class="control-label" for="">设计模式实例名称</label>
							<div class="controls">
								<span class="uneditable-input input-xlarge"><c:out
										value="${dpiName}"></c:out></span>
							</div>
						</div>
						<form class="form-horizontal"
							action="<%=request.getContextPath()%>/controlDesignPattern/add"
							method="post">
							<div class="control-group span9 form-horiziontal">
								<input type="hidden" name="dpiFileName" value="${dpiFileName}"></input>
								<input type="hidden" name="dpiName" value="${dpiName}"></input>
								<input type="hidden" name="dpcUri" value="${dpcUri}"></input>
								<div class="control-group">
									<label class="control-label" for="busType">键码定义</label>
									<div class="controls">
										<div class="btn-group">
											<button class="btn btn-primary"
												data-target="#add_key_code_panel" data-toggle="modal">增加</button>
										</div>
										<input type="hidden" name="keyCodes" value="" />
										<table class="table table-bordered table-striped table-hover"
											id="key_codes_table">
											<thead>
												<tr>
													<th>#</th>
													<th>按键</th>
													<th>键码值</th>
													<th>操作</th>
												</tr>
											</thead>
											<tbody></tbody>
										</table>
									</div>
								</div>
								<div class="control-group">
									<label class="control-label" for="rollFrequency">轮询频率</label>
									<div class="controls">
										<input type="text" name="rollFrequency" /> Hz
									</div>
								</div>
								<div class="control-group">
									<label class="control-label" for="sharedMemory">控制响应表</label>
									<div id="sharedMemory" class="controls">
										<div class="btn-group">
											<button class="btn btn-primary"
												data-target="#add_control_response_panel"
												data-toggle="modal">增加</button>
										</div>
										<input type="hidden" name="controlResponses" value="" />
										<table class="table table-bordered table-striped table-hover"
											id="control_responses_table">
											<thead>
												<tr>
													<th>#</th>
													<th>页面</th>
													<th>按键</th>
													<th>控制响应函数</th>
													<th>操作</th>
												</tr>
											</thead>
											<tbody>
											</tbody>
										</table>
									</div>
								</div>
								<div class="control-group">
									<label class="control-label" for="frequency">其他操作</label>
									<div class="controls">
										<button type="button" class="btn">建立事件响应</button>
									</div>
								</div>
								<div class="control-group">
									<div class="controls">
										<button type="submit" class="btn btn-primary">确认</button>
										<button type="reset" class="btn">取消</button>
									</div>
								</div>

							</div>
						</form>
					</div>
				</div>
			</div>
			<!-- /tabbable -->
		</div>
		</div>
		
	<div class="modal hide fade" id="add_key_code_panel">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
			<h3>页面详情</h3>
		</div>
		<div class="modal-body">
			<div class="control-group">
    			<label class="control-label" for="buttons">按键</label>
    			<div class="controls">
      				<select id="buttons">
						<option value="MFD周边键左1">MFD周边键左1</option>
						<option value="MFD周边键左2">MFD周边键左2</option>
						<option value="MFD周边键左3">MFD周边键左3</option>
						<option value="MFD周边键左4">MFD周边键左4</option>
						<option value="MFD周边键左5">MFD周边键左5</option>
						<option value="MFD周边键左6">MFD周边键左6</option>
					</select>
    			</div>
 			</div>
			<div class="control-group">
    			<label class="control-label" for="key_code">键码值</label>
    			<div class="controls">
    				<input type="text" id="key_code" placeholder="0x0000">
				</div>
 			</div>
		</div>
		<div class="modal-footer">
			<button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button>
			<button class="btn btn-primary" id="add_key_code_btn">保存</button>	
		</div>
	</div>
	
	<div class="modal hide fade" id="add_control_response_panel">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
			<h3>添加控制响应</h3>
		</div>
		<div class="modal-body form-horizontal">
			<div class="control-group">
    			<label class="control-label" for="pages">页面</label>
    			<div class="controls">
      				<select id="pages">
						<c:forEach items="${exist_pages}" var="page">
							<option value="${page.get('page_name').getValue()}">
								<c:out value="${page.get('page_name').getValue()}"></c:out>
							</option>
						</c:forEach>
					</select>
    			</div>
 			</div>
 			<div class="control-group">
      			<label class="control-label" for="buttons2">按键</label>
    			<div class="controls">
      				<select id="buttons2">
						<option value="MFD周边键左1">MFD周边键左1</option>
						<option value="MFD周边键左2">MFD周边键左2</option>
						<option value="MFD周边键左3">MFD周边键左3</option>
						<option value="MFD周边键左4">MFD周边键左4</option>
						<option value="MFD周边键左5">MFD周边键左5</option>
						<option value="MFD周边键左6">MFD周边键左6</option>
					</select>
    			</div>
    		</div>
 			<div class="control-group">
    			<label class="control-label" for="control_response_functions">控制响应函数</label>
    			<div class="controls">
      				<select id="control_response_functions">
						<c:forEach items="${control_response_functions}" var="function">
							<option value="${function.id}">
								<c:out value="${function.methodSigniture}"></c:out>
							</option>
						</c:forEach>
					</select>
    			</div>
 			</div>
		</div>
		<div class="modal-footer">
			<button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button>
			<button class="btn btn-primary" id="add_control_response_btn">保存</button>
		</div>
	</div>
		
		<!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="<c:url value='/js/jquery.min.js'/>"></script>
    <script src="<c:url value='/js/bootstrap.min.js'/>"></script>
	<script src="<c:url value='/js/control_dp_component.js'/>"></script>
	<script src="<c:url value='/js/bootstrap.file-input.js'/>"></script>
		
</body>
</html>